<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 搜索 -->
        <el-form>
          <div class="filter-container">
            <el-form-item>
              <label style="">关键词</label>
              <el-input style="width: 200px;padding: 0 15px;border-radius: 4px;" placeholder="根据编号搜索" class="filter-item" v-model="randomsPage.keyword"></el-input>
              <div class="randomsButton">
                <el-button class="filter-item" size="small" @click='handleEle'>清除</el-button>
                <el-button class="filter-item" size="small" type="primary" @click="handleSearch">搜索</el-button>
              </div>
            </el-form-item>
          </div>
        </el-form>
        <!-- 消息提示文案 -->
        <el-alert :title='randText' type="info" show-icon>
        </el-alert>
        <el-table :data="List" highlight-current-row style="width: 100%" border>
          <el-table-column prop="id" label="编号" width="200px">
          </el-table-column>
          <el-table-column prop="questionType" label="题型">
            <template v-slot="{row}">
              <span>{{row.questionType==='1'?'单选':row.questionType==='2'?'多选':'简答'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="questionIDs" label="题目编号" width="200px">
            <template v-slot="{row}">
              <a href="#" style="color: rgb(0, 153, 255);" v-for="(item,i) in row.questionIDs" :key="i" @click="handlePreview(item)">{{item.number}}<br /></a>
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="录入时间">
          </el-table-column>
          <el-table-column prop="totalSeconds" label="答题时间">
          </el-table-column>
          <el-table-column prop="accuracyRate" label="正确率">
          </el-table-column>
          <el-table-column prop="userName" label="录入人">
          </el-table-column>
          <!-- 按钮 -->
          <el-table-column align="center" label="操作" class-name="small-padding fixed-width">
            <template v-slot="{row}">
              <el-button type="danger" icon="el-icon-delete" circle @click="handleDel(row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="randomsPage.page" :page-sizes="[5, 10, 20, 50]" :page-size="10" layout="->, sizes, prev, pager, next, jumper" :total="randomsTotal">
          </el-pagination>
        </div>
      </el-card>
      <!-- 弹出框 -->
      <el-dialog title="题目预览" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
        <el-row :gutter="24">
          <el-col :span="6">【题型】:{{newObj.questionType==='1'?'单选':newObj.difficulty==='2'?'简答':'多选'}}</el-col>
          <el-col :span="6">【编号】:{{newObj.id}}</el-col>
          <el-col :span="6">【难度】:{{newObj.difficulty==='1'?'简单':newObj.difficulty==='2'?'一般':'复杂'}}</el-col>
          <el-col :span="6">【标签】:{{newObj.tags}}</el-col>
        </el-row>
        <br />
        <el-row :gutter="24">
          <el-col :span="6">【学科】:{{newObj.subjectID}}</el-col>
          <el-col :span="6">【目录】:{{newObj.catalogID}}</el-col>
          <el-col :span="6">【方向】:{{newObj.direction}}</el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>【题干】: </el-row>
        <el-row><span v-html="newObj.question"></span> </el-row>
        <el-row> {{newObj.questionType==='1'?'单选题 选项：（以下选中的选项为正确答案）':newObj.questionType==='2'?'多选题 选项：（以下选中的选项为正确答案)':'简答题'}}</el-row>
        <div v-for="(item,i) in newObj.options" :key="i">
          <el-radio v-if="newObj.questionType ==='1'" v-model="item.isRight" :label="1"> {{item.code}}. {{item.title}}</el-radio>
          <el-checkbox v-else-if="newObj.questionType ==='2'" v-model="item.isRight" :label="1">{{item.code}}. {{item.title}}</el-checkbox>
          <span v-else-if="newObj.questionType ==='3'">{{item.title}}</span>
        </div>
        <!-- <form v-for="(item,i) in newObj.options" :key="i">
          <template v-if="newObj.questionType ==='1'">
            <el-radio v-model="item.isRight" label=" '1'">{{item.code}}. {{item.title}}</el-radio>
          </template>
        </form> -->

        <el-divider></el-divider>
        <el-row>【参考答案】:
          <el-button type="danger" size="mini" @click="handleVideo">视频答案预览</el-button>
          <div>
            <img v-if="!newObj.videoURL" src="http://img.netbian.com/file/2022/0117/1130148RqIM.jpg">
            <video :src="newObj.videoURL" autoplay="" muted="muted" controls="" loop="" width="300" :style="{display:showVideo}"></video>
          </div>
        </el-row>
        <div></div>
        <el-divider></el-divider>
        <el-row>【答案解析】:{{newObj.answerID}}</el-row>
        <el-divider></el-divider>
        <el-row>【题目备注】:{{newObj.remarks}}</el-row>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleClose">关闭</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions.js'
export default {
  data () {
    return {
      // 视频显示隐藏
      showVideo: 'none',
      newObj: {},
      // 弹窗显示
      dialogVisible: false,
      // 列表总数
      randomsTotal: 0,
      // 提示消息
      randText: '',
      // 渲染列表数据
      List: [],
      // 查询参数
      randomsPage: {
        page: 1,
        pagesize: 10,
        keyword: ''
      }
    }
  },
  methods: {
    // 视频播放器 显示
    handleVideo () {
      this.showVideo = 'block'
    },
    // 弹窗信息渲染
    async handlePreview (Obj) {
      // 调用接口 获取数据
      this.dialogVisible = true
      const ret = await detail(Obj)
      this.newObj = ret.data
    },
    // 关闭弹窗
    handleClose () {
      this.dialogVisible = false
      this.showVideo = 'none'
    },
    // 删除
    handleDel (Obj) {
      // 调用接口
      this.$confirm('确认要删除吗？, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const ret = await removeRandoms(Obj)
          if (ret.status === 200) {
            // 删除成功 重新渲染数据
            this.$message.success('删除成功')
            this.getList()
            const num = Math.ceil((this.randomsTotal - 1) / this.randomsPage.pagesize)
            this.randomsPage.page = this.randomsPage.page > num ? num : this.randomsPage.page
          }
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    // 清除表单数据
    handleEle () {
      this.randomsPage.keyword = ''
      this.getList()
    },
    // 搜索 查
    async handleSearch (id) {
      if (!id) {
        this.getList()
      } else {
        // 调用接口
        const ret = await randoms(this.randomsPage)
        if (ret.status === 200) {
          // 获取查询的数据
          // 获取数据成功 获得列表数据
          this.List = ret.data.items
          // 提示消息
          this.randText = `数据一共${ret.data.counts}条`
          this.randomsTotal = ret.data.counts
        }
      }
    },
    // 调整每页的个数
    handleSizeChange (val) {
      this.randomsPage.pagesize = val
      this.getList(this.randomsPage)
    },
    // 跳转页码
    handleCurrentChange (val) {
      this.randomsPage.page = val
      this.getList()
    },
    // 获取列表数据
    async getList () {
      try {
        // 调用接口
        const ret = await randoms(this.randomsPage)
        // 获取数据成功 获得列表数据
        this.List = ret.data.items
        // 提示消息
        this.randText = `数据一共${ret.data.counts}条`
        this.randomsTotal = ret.data.counts
      } catch {
        this.$message.error('获取组题列表失败')
      }
    }
  },
  // 初始化
  created () {
    this.getList()
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 10px;
  // text-align: right;
}
</style>
<style>
.el-form-item__content {
  display: flex;
}

.el-table th {
  background-color: #fafafa;
}
.el-table th.is-leaf {
  border-bottom: 2px solid #e8e8e8;
}
/* .el-form-item {
  margin-bottom: 0;
} */
.disabled td {
  background-color: #f9f9f9;
  color: #c1c1c1;
}
.disabled .el-button--primary,
.disabled .el-button--danger {
  background-color: #dbdada;
  border: 1px solid #dbdada;
  color: #999;
  cursor: not-allowed;
}
</style>
